<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#tb{
			width: 800px;
			border-collapse: collapse;
			margin: 20px auto;
		}
		#tb th{
			background-color: #0094ff;
			color:white;
			font-size: 16px;
			padding: 5px;
			text-align: center;
			border: 1px solid black;
		}
		#tb td{
		
			padding: 5px;
			text-align: center;
			border: 1px solid black;
		}
	</style>
	<script src="../vue1026.js"></script>
</head>
<body>
	<div id="app">
	<input type="text" v-model="id">
	<input type="text" v-model="pname">
	<button @click="addData">添加数据</button>
		<table id="tb">
			<tr>
				<th>编号</th>
				<th>名称</th>
				<th>创建时间</th>
				<th>操作</th>
			</tr>
			<tr v-show="list.length ==0">
				<td colspan="4">当前列表没有任何数据</td>
			</tr>
			<tr v-for="item in list">
				<td>{{item.id}}</td>
				<td>{{item.name}}</td>
				<td>{{item.ctime}}</td>
				<td>
					<a href="javascript:void(0)" @click="delData(item.id)">删除</a>
				</td>
			</tr>
		</table>
	</div>
</body>
<script>
new Vue({
	el:'#app',
	data:{
		list:[
			{id:1,name:'奔驰',ctime:new Date}
		],
		id:0,
		pname:''
	},
	methods:{
		addData:function(){
			// 1.0 包装成list要求的对象
			var p = {id:this.id,name:this.pname,ctime:new Date()};

			// 2.0 将p追加到list数值中
			 this.list.push(p);

			 // 3.0 清空页面上的文本框中的数据
			 this.id = 0;
			 this.pname = '';
		},
		delData:function(id){
			// 0.0 提醒用户是否要删除数据
			if(!confirm('是否要删除数据?')){
				//当用户点击的取消按钮的时候，应该阻断这个方法中的后面代码的继续执行
				return;
			}

			// 1.0 调用list.findIndex()方法根据传入的id获取到这个要删除数据的索引值
			var index = this.list.findIndex(function(item){return item.id == id});

			// 2.0 调用的 list.splice(删除的索引，删除的元素个数)
			this.list.splice(index,1);
		}
	}
});
</script>
</html>